<template>
  <div class="envirAlarm">
    <div>
      <div class="table_top">
        <div class="title">AI实时检测 - 环境识别</div>
        <div class="table_edit">
          <div @click="editTable('envir')" class="edit-btn cursor-pointer">
            {{ !editEnviron ? $t("编辑") : $t("保存") }}
          </div>
          <div
            v-if="editEnviron"
            class="resets-btn"
            @click="resetEdit('envir')"
          >
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <TableComponent
        :getTableList="getTableList"
        ref="envirComponent"
        :tableData="environData"
      ></TableComponent>
    </div>
    <div>
      <div class="table_top">
        <div class="title">AI实时检测 - 人员作业识别</div>
        <div class="table_edit">
          <div @click="editTable('task')" class="edit-btn cursor-pointer">
            {{ !editTask ? $t("编辑") : $t("保存") }}
          </div>
          <div v-if="editTask" class="resets-btn" @click="resetEdit('task')">
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <TableComponent
        ref="taskComponent"
        :tableData="taskData"
      ></TableComponent>
    </div>
  </div>
</template>

<script>
import { API_comprehensiveList } from "@/api/task/alarmrules.js";
import TableComponent from "./TableComponent.vue";
export default {
  components: { TableComponent },
  data() {
    return {
      environData: [], //AI实时检测-环境识别数据
      taskData: [], //AI实时检测-人员作业识别数据
      editEnviron: false,
      editTask: false,
    };
  },
  props: {},
  mounted() {
    this.getTableList();
  },
  methods: {
    editTable(type) {
      if (type === "envir") {
        this.$refs.envirComponent.editTable(this.editEnviron, this.environData);
        //保存
        if (this.editEnviron == true) {
          this.$refs.envirComponent.getAlarmRules(this.environData);
          this.editEnviron = false;
        } else {
          this.editEnviron = !this.editEnviron;
        }
      } else if (type === "task") {
        this.$refs.taskComponent.editTable(this.editTask, this.taskData);
        //保存
        if (this.editTask == true) {
          this.$refs.taskComponent.getAlarmRules(this.taskData);
          this.editTask = false;
        } else {
          this.editTask = !this.editTask;
        }
      }
    },
    resetEdit(type) {
      if (type === "envir") {
        this.$refs.envirComponent.resetEdit(this.environData);
        this.editEnviron = false;
      } else if (type === "task") {
        this.$refs.taskComponent.resetEdit(this.taskData);
        this.editTask = false;
      }
    },
    /**获取表格数据 */
    getTableList() {
      this.environData = [];
      this.taskData = [];
      API_comprehensiveList().then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((item) => {
              if (item.dateType == 9) {
                this.environData.push(item);
              } else if (item.dateType == 10) {
                this.taskData.push(item);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.envirAlarm {
  padding: 0 24px;
}
.table_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #00d1ff;
    padding: 24px 0 16px;
  }
  .table_edit {
    display: flex;
  }
}
.edit-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(0, 209, 255, 0.7);
  background-color: rgba(0, 209, 255, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.resets-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(219, 255, 251, 0.7);
  background-color: rgba(219, 255, 251, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin-left: 10px;
}
</style>
